<template>
    <div id="app">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 大客户专员信息 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search_box">
                <el-form label-width="130px" :inline="true">
                    <el-form-item label="姓名:">
                        <el-input placeholder="联系人姓名" v-model="searchName" style="width: 190px" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <el-input placeholder="联系人手机号查询" v-model="searchPhone" style="width: 190px" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="大客户行业:">
                        <el-cascader expand-trigger="hover" clearable :options="searchIndOption" v-model="searchIndustry"> </el-cascader>
                    </el-form-item>
                    <el-form-item label="单位查询">
                        <el-input placeholder="客户单位查询" style="width: 190px" v-model="searchCompany" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="请选择地区:">
                        <el-cascader style="width: 200px" expand-trigger="hover" :options="areaOptions" v-model="searchArea" clearable>
                        </el-cascader>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" @click="addMembers" icon="el-icon-plus">添加大客户专员</el-button>
            <div class="radio">
                大客户专员:
                <el-radio v-model="personType" label="1">大客户专员</el-radio>
                <el-radio v-model="personType" label="2">大客户所属下级</el-radio>
            </div>
            <div class="btns">
                <el-button type="primary" icon="el-icon-search" @click="chaxun(searchName)">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh">重置</el-button>
            </div>
            <!-- 客户列表区域 -->
            <div class="list">
                <el-table :data="tableDatas" style="width: 100%" border>
                    <el-table-column width="40px" type="index" label="ID"> </el-table-column>
                    <el-table-column prop="contactsName" label="姓名"> </el-table-column>
                    <el-table-column prop="Company" label="公司"> </el-table-column>
                    <el-table-column min-width="110px" prop="phone" label="手机号"> </el-table-column>
                    <el-table-column min-width="170px" label="开通时间"> 2021-03-10 17:09:35 </el-table-column>
                    <el-table-column prop="Sales_name" label="代理人"> </el-table-column>
                    <el-table-column min-width="110px" prop="sales_calls" label="联系电话"> </el-table-column>
                    <el-table-column prop="province" label="省"> </el-table-column>
                    <el-table-column prop="city" label="市"> </el-table-column>
                    <el-table-column prop="area" label="区"> </el-table-column>
                    <!-- 表格之中切换状态 -->
                    <el-table-column min-width="126px" label="账号状态" roperty="Account_status">
                        <template slot-scope="scope">
                            <el-switch
                                prop="Account_status"
                                v-model="scope.row.Account_status"
                                active-text="开"
                                inactive-text="关"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="change(scope.$index, scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" align="center" label="操作">
                        <el-button size="medium" @click="handleEdit">详情</el-button>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[4, 8]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
                >
                </el-pagination>
            </div>
            <!-- 新增用户对话框 -->
            <div class="dialog">
                <el-dialog title="添加大客户专员" :visible.sync="isAddMembers">
                    <el-form :model="addForm">
                        <el-form-item>
                            <el-input placeholder="联系人" v-model="addForm.name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input type="password" placeholder="密码" v-model="addForm.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="公司" v-model="addForm.company"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="电话" v-model="addForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="省" v-model="addForm.province"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="市" v-model="addForm.city"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="区" v-model="addForm.area"></el-input>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button @click="closeDialog()">取消</el-button>
                        <el-button type="primary" @click="sumbitAddRow()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import area from '../../../assets/json/area';

export default {
    name: 'dataStatistics',
    data() {
        return {
            // 根据searchName查询用户
            searchName: '',
            searchPhone: '',
            searchIndustry: [1],
            searchCompany: '',
            // 大客户行业
            searchIndOption: [
                {
                    value: 1,
                    label: '建筑业'
                },
                {
                    value: 2,
                    label: '畜牧业'
                },
                {
                    value: 3,
                    label: '金融业'
                }
            ],
            searchArea: '',
            personType: '1',
            tableData: [],
            tableData2: [],
            currentPage: 1,
            pageSize: 4,
            dialogVisible1: false,
            // 添加用户窗口是否显示
            isAddMembers: false,
            // 新增用户表单数据
            addForm: []
        };
    },
    computed: {
        areaOptions() {
            return area;
        },
        tableDatas() {
            if (this.tableData !== [])
                return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize - 1);
        }
    },
    methods: {
        // 获取大客户专员全部数据
        getBigUserInfo() {
            this.axios.get('/api/getAllKeyAccounts').then((res) => {
                this.tableData2 = res.data.data;
                this.tableData = this.tableData2;
                //
                console.log('获取成功', this.tableData);
            });
        },
        // 改变账户状态
        change(index, row) {
            this.$set(this.tableData2, index, row);
            this.tableData = this.tableData2;
            // 打印出账户名和状态
            // console.log(this.tableData2[index].Sales_name, this.tableData2[index].Account_status);
            var params = {
                // 当前账户状态
                _id: row._id
            };
            this.axios
                .post('/api/setAccountsStatus', params)
                .then((res) => {
                    //	请求成功
                    console.log(res);
                    // 弹窗提醒
                    this.$message({
                        // 可手动关闭
                        showClose: true,
                        // 文字居中
                        center: true,
                        message: res.data.msg,
                        type: 'success'
                    });
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        // 点击新增用户
        addMembers() {
            this.isAddMembers = true;
            this.addForm = {
                name: '',
                password: '',
                company: '',
                phone: '',
                province: '',
                city: '',
                area: ''
            };
        },
        // 新增大客户
        sumbitAddRow() {
            var params = {
                Sales_name: this.addForm.name,
                password: this.addForm.password,
                Company: this.addForm.company,
                phone: this.addForm.phone,
                province: this.addForm.province,
                city: this.addForm.city,
                area: this.addForm.area,
                timer: new Date().getTime(),
                Account_status: false
            };
            this.tableData2.push(params);
            // 把数据更新进数据源tableData
            this.tableData = this.tableData2;
            // 关闭新增窗口
            this.isAddMembers = false;
        },
        // 关闭新增用户框
        closeDialog() {
            this.centerDialogVisible = false;
            this.isAddMembers = false;
            console.log('editfrom', this.editForm);
            console.log('addfrom', this.addForm);
        },
        // 查询客户
        chaxun(searchName) {
            // 获取行业
            // console.log(this.searchIndOption[this.searchIndustry].label);
            console.log('查询了', this.tableData2);
            this.tableData = [];
            this.tableData2
                .filter((element) => element.contactsName.indexOf(searchName) !== -1)
                .map((element) => {
                    this.tableData.push(element);
                });
        },
        // 点击详情的方法
        handleEdit() {
            this.$message({
                // 可手动关闭
                showClose: true,
                // 文字居中
                center: true,
                message: '详情',
                type: 'success'
            });
        },
        handleSizeChange(val) {
            // console.log(val);
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            console.log(val);
            this.currentPage = val;
        },
        openAdd() {
            this.dialogVisible1 = true;
        }
    },
    mounted() {
        // 页面挂载完成后执行
        this.getBigUserInfo();
    }
};
</script>

<style scoped>

.search_box {
    display: flex;
    margin-bottom: 20px;
}
.search_box > div {
    margin-right: 10px;
}
.search_box > div > div {
    display: inline-block;
    width: 200px;
}
.radio {
    display: inline-block;
    margin-left: 30px;
    height: 40px;
    line-height: 40px;
}
.btns {
    float: right;
}
.list {
    margin-top: 10px;
}
.block {
    display: flex;
    justify-content: center;
}
</style>
